<template>
  <el-container class="home_container">
    <el-header>
      <div class="home_title">V部落博客管理平台</div>
      <div class="home_userinfoContainer">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link home_userinfo">
            {{ currentUserName
            }}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="sysMsg">系统消息</el-dropdown-item>
            <el-dropdown-item command="MyHome">个人主页</el-dropdown-item>
            <el-dropdown-item command="logout" divided
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          v-for="(item, index) in this.$router.options.routes"
          :key="item.name"
          default-active="0"
          class="el-menu-vertical-demo"
          style="background-color: #ECECEC"
          @select="selectMenu"
          router
        >
          <div v-if="!item.hidden">
            <el-submenu
              :index="index + ''"
              v-if="item.children != null && item.children.length > 1"
            >
              <template slot="title">
                <i
                  :class="[
                    item.meta != null && item.meta.icon != null
                      ? item.meta.icon
                      : 'el-icon-menu'
                  ]"
                ></i>
                <span>{{
                  item.meta != null && item.meta.title != null
                    ? item.meta.title
                    : item.name
                }}</span>
              </template>

              <div v-for="child in item.children" :key="child.path">
                <el-menu-item :index="child.path" v-if="!child.hidden">
                  <span slot="title" v-if="!child.hidden">{{
                    child.meta != null && child.meta.title != null
                      ? child.meta.title
                      : item.name
                  }}</span></el-menu-item
                >
              </div>
            </el-submenu>
            <el-menu-item :index="item.children[0].path" v-else>
              <i
                :class="[
                  item.meta != null && item.meta.icon != null
                    ? item.meta.icon
                    : 'el-icon-menu'
                ]"
              ></i>
              <span slot="title">{{
                item.meta != null && item.meta.title != null
                  ? item.meta.title
                  : item.name
              }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-text="
                this.$router.currentRoute.meta != null
                  ? this.$router.currentRoute.meta.title
                  : this.$router.currentRoute.name
              "
            ></el-breadcrumb-item>
          </el-breadcrumb>
          <keep-alive>
            <router-view v-if="this.$route.meta.keepAlive"></router-view>
          </keep-alive>
          <router-view v-if="!this.$route.meta.keepAlive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { get } from "../utils/api";

export default {
  name: "Home",
  data() {
    return {
      currentUserName: ""
    };
  },
  mounted() {
    this.$alert(
      "为了确保所有的小伙伴都能看到完整的数据演示，数据库只开放了查询权限和部分字段的更新权限，其他权限都不具备，完整权限的演示需要大家在自己本地部署后，换一个正常的数据库用户后即可查看，这点请大家悉知!",
      "友情提示",
      {
        confirmButtonText: "确定"
      }
    );
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.currentUserName = userInfo.nickName;
  },
  methods: {
    handleCommand(command) {
      // if (command == "logout") {
      // }
      let _this = this;
      switch (command) {
        case "logout":
          this.$confirm("注销登录吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(
            function() {
              // eslint-disable-next-line no-unused-vars
              get("/logout").then(resp => {
                localStorage.removeItem("userInfo");
                _this.$router.replace({ path: "/login" });
              });
            },
            function() {
              //取消
            }
          );
          break;
        case "MyHome":
          this.$router.replace({ path: "/about" });
          break;
        default:
          break;
      }
    },
    selectMenu(key, path) {
      console.log(key, path);
    }
  }
};
</script>

<style>
.home_container {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.el-header {
  background-color: #20a0ff;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-aside {
  background-color: #ececec;
}

.el-main {
  background-color: #fff;
  color: #000;
  text-align: center;
}

.home_title {
  color: #fff;
  font-size: 22px;
  display: inline;
}

.home_userinfo {
  color: #fff;
  cursor: pointer;
}

.home_userinfoContainer {
  display: inline;
  margin-right: 20px;
}
</style>
